<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bid Analysis 2023</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%; /* 页面占满整个视口 */
            font-family: Arial, sans-serif;
        }
        .main-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* 三等分列，横向排列 */
            grid-gap: 15px;
            height: 100%;
        }
        .chart {
            background: #f0f0f0;
            padding: 10px;
            border-radius: 10px;
            height: 1000px; /* 设置固定高度 */
            width: 100%;
        }
        .chart1 {
            background: #f0f0f0;
            padding: 10px;
            border-radius: 10px;
            height: 2000px; /* 设置固定高度 */
            width: 100%;
        }
        h1 {
            text-align: center;
            margin-top: 0;
        }
    </style>
</head>
<body>
    <h1>2023京津冀三地中标数据可视化大屏</h1>
    <div class="main-container">
        <div class="chart-container">
            <canvas id="region1_amount_chart" class="chart"></canvas>
            <canvas id="region2_amount_chart" class="chart"></canvas>
            <canvas id="region3_amount_chart" class="chart"></canvas>
            <canvas id="region_monthly_amount_chart" class="chart"></canvas>
        </div>
        <div class="center-columns">
            <canvas id="regionproject_count_data" class="chart1"></canvas>
            <canvas id="regionawardamount_data" class="chart1"></canvas>
        </div>
        <div class="chart-container1">
            <canvas id="region1_count_chart" class="chart"></canvas>
            <canvas id="region2_count_chart" class="chart"></canvas>
            <canvas id="region3_count_chart" class="chart"></canvas>
            <canvas id="region_monthly_count_chart" class="chart"></canvas>
        </div>
    </div>
    <script>
        function createRegionalChart1(id, data) {
            console.log(id, data);
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '2023年北京每月中标金额分布',
                    left: 'center',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.month),
                    axisLabel: {
                        interval: 0,
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                series: [{
                    name: '中标金额',
                    type: 'bar',
                    data: data.map(item => parseFloat(item.award_amount)),
                    itemStyle: {
                        color: 'rgba(75, 192, 192, 0.8)'
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function createRegionalChart2(id, data) {
            console.log(id, data);
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '2023年北京每月中标金额分布',
                    left: 'center',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.month),
                    axisLabel: {
                        interval: 0,
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                series: [{
                    name: '中标金额',
                    type: 'bar',
                    data: data.map(item => parseFloat(item.award_amount)),
                    itemStyle: {
                        color: 'rgba(75, 192, 192, 0.8)'
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function createRegionalChart3(id, data) {
            console.log(id, data);
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '2023年北京每月中标金额分布',
                    left: 'center',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.month),
                    axisLabel: {
                        interval: 0,
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                series: [{
                    name: '中标金额',
                    type: 'bar',
                    data: data.map(item => parseFloat(item.award_amount)),
                    itemStyle: {
                        color: 'rgba(75, 192, 192, 0.8)'
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function createRegionalChart4(id, data) {
        console.log(id, data);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(id));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '2023年北京每月中标金额分布',
                left: 'center',
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'bold'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: data.map(item => item.month),
                axisLabel: {
                    interval: 0,
                    rotate: 45
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 元'
                }
            },
            series: [{
                name: '中标金额',
                type: 'bar',
                data: data.map(item => {
                    if (item.hasOwnProperty('award_count')) {
                        return parseFloat(item.award_count);
                    } else {
                        return parseFloat(item.award_amount);
                    }
                }),
                itemStyle: {
                    color: 'rgba(75, 192, 192, 0.8)'
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        }

        function createRegionalChart5(id, data) {
        console.log(id, data);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(id));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '2023年北京每月中标金额分布',
                left: 'center',
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'bold'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: data.map(item => item.month),
                axisLabel: {
                    interval: 0,
                    rotate: 45
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 元'
                }
            },
            series: [{
                name: '中标金额',
                type: 'bar',
                data: data.map(item => {
                    if (item.hasOwnProperty('award_count')) {
                        return parseFloat(item.award_count);
                    } else {
                        return parseFloat(item.award_amount);
                    }
                }),
                itemStyle: {
                    color: 'rgba(75, 192, 192, 0.8)'
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        }

        function createRegionalChart6(id, data) {
        console.log(id, data);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(id));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '2023年北京每月中标金额分布',
                left: 'center',
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'bold'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: data.map(item => item.month),
                axisLabel: {
                    interval: 0,
                    rotate: 45
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 元'
                }
            },
            series: [{
                name: '中标金额',
                type: 'bar',
                data: data.map(item => {
                    if (item.hasOwnProperty('award_count')) {
                        return parseFloat(item.award_count);
                    } else {
                        return parseFloat(item.award_amount);
                    }
                }),
                itemStyle: {
                    color: 'rgba(75, 192, 192, 0.8)'
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        }

        function createRegionalMonthlyChart(id, data) {
            // 获取图表的 DOM 元素
            const chartDom = document.getElementById(id);
            // 初始化 ECharts 实例
            const myChart = echarts.init(chartDom);

            // 配置图表选项
            const option = {
                title: {
                    text: 'Regional Monthly Chart'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Region 1 Award Amount', 'Region 2 Award Amount', 'Region 3 Award Amount', 'Region 1 Award Count', 'Region 2 Award Count', 'Region 3 Award Count']
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.month)
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'Award Amount',
                        position: 'left',
                        alignTicks: true,
                        axisLabel: {
                            formatter: '{value} $'
                        }
                    },
                    {
                        type: 'value',
                        name: 'Award Count',
                        position: 'right',
                        alignTicks: true,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: 'Region 1 Award Amount',
                        type: 'bar',
                        data: data.map(item => parseFloat(item.region_1_award_amount) || 0),
                        itemStyle: {
                            color: 'rgba(255, 99, 132, 0.8)'
                        }
                    },
                    {
                        name: 'Region 2 Award Amount',
                        type: 'bar',
                        data: data.map(item => parseFloat(item.region_2_award_amount) || 0),
                        itemStyle: {
                            color: 'rgba(54, 162, 235, 0.8)'
                        }
                    },
                    {
                        name: 'Region 3 Award Amount',
                        type: 'bar',
                        data: data.map(item => parseFloat(item.region_3_award_amount) || 0),
                        itemStyle: {
                            color: 'rgba(255, 206, 86, 0.8)'
                        }
                    },
                    {
                        name: 'Region 1 Award Count',
                        type: 'line',
                        yAxisIndex: 1,
                        data: data.map(item => parseInt(item.region_1_award_count, 10) || 0),
                        itemStyle: {
                            color: 'rgba(75, 192, 192, 0.8)'
                        }
                    },
                    {
                        name: 'Region 2 Award Count',
                        type: 'line',
                        yAxisIndex: 1,
                        data: data.map(item => parseInt(item.region_2_award_count, 10) || 0),
                        itemStyle: {
                            color: 'rgba(153, 102, 255, 0.8)'
                        }
                    },
                    {
                        name: 'Region 3 Award Count',
                        type: 'line',
                        yAxisIndex: 1,
                        data: data.map(item => parseInt(item.region_3_award_count, 10) || 0),
                        itemStyle: {
                            color: 'rgba(255, 159, 64, 0.8)'
                        }
                    }
                ]
            };

            // 使用配置项和数据显示图表
            myChart.setOption(option);
        }


        function createChart1(id, data, type) {
            // 初始化 ECharts 实例
            const chart = echarts.init(document.getElementById(id));

            // 根据 type 参数设置图表类型
            let seriesType = type === 'pie' ? 'pie' : 'bar'; // 根据 type 决定图表类型

            // 配置项
            const options = {
                title: {
                    text: '京津冀三地中标数量饼图', // 标题文本
                    left: 'center', // 标题位置
                    top: 20, // 标题顶部留白
                    textStyle: {
                        fontSize: 12, // 字体大小
                        fontWeight: 'bold', // 字体粗细
                        color: 'black' // 标题文本颜色
                    }
                },
                tooltip: {
                    trigger: 'item' // 提示框触发类型
                },
                legend: {
                    orient: 'vertical', // 图例方向
                    left: 'left', // 图例位置
                    data: ['Project Count', 'Total Award Amount'] // 图例数据
                },
                xAxis: {
                    type: 'category', // x 轴类型
                    data: data.map(item => item.region), // x 轴标签
                    axisLabel: {
                        rotate: 45 // 标签旋转角度
                    }
                },
                yAxis: {
                    type: 'value', // y 轴类型
                    min: 0, // y 轴最小值
                    axisLabel: {
                        formatter: '{value}' // y 轴标签格式化
                    }
                },
                series: [
                    {
                        name: 'Project Count', // 系列名称
                        type: seriesType, // 系列类型
                        data: data.map(item => ({
                            name: item.region, // 数据名称
                            value: parseFloat(item.project_count) // 数据值
                        })),
                        itemStyle: {
                            color: function (params) {
                                const colors = ['rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(54, 162, 235, 0.2)'];
                                return colors[params.dataIndex % colors.length];
                            },
                            borderColor: function (params) {
                                const borderColors = ['rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 99, 132, 1)', 'rgba(255, 205, 86, 1)', 'rgba(54, 162, 235, 1)'];
                                return borderColors[params.dataIndex % borderColors.length];
                            },
                            borderWidth: 1
                        }
                    },
                    {
                        name: 'Total Award Amount', // 系列名称
                        type: seriesType, // 系列类型
                        data: data.map(item => ({
                            name: item.region, // 数据名称
                            value: parseFloat(item.total_award_amount) // 数据值
                        })),
                        itemStyle: {
                            color: function (params) {
                                const colors = ['rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(54, 162, 235, 0.2)'];
                                return colors[params.dataIndex % colors.length];
                            },
                            borderColor: function (params) {
                                const borderColors = ['rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 99, 132, 1)', 'rgba(255, 205, 86, 1)', 'rgba(54, 162, 235, 1)'];
                                return borderColors[params.dataIndex % borderColors.length];
                            },
                            borderWidth: 1
                        }
                    }
                ]
            };

            // 如果是饼图，修改配置项
            if (type === 'pie') {
                options.series = options.series.map(series => {
                    series.radius = '50%'; // 饼图半径
                    series.center = ['50%', '50%']; // 饼图中心位置
                    return series;
                });
            }

            // 使用配置项生成图表
            chart.setOption(options);
        }


        function createChart2(id, data, type) {
            // 初始化 ECharts 实例
            const chart = echarts.init(document.getElementById(id));

            // 根据 type 参数设置图表类型
            let seriesType = type === 'pie' ? 'pie' : 'bar'; // 根据 type 决定图表类型

            // 配置项
            const options = {
                title: {
                    text: '京津冀三地中标数量饼图', // 标题文本
                    left: 'center', // 标题位置
                    top: 20, // 标题顶部留白
                    textStyle: {
                        fontSize: 12, // 字体大小
                        fontWeight: 'bold', // 字体粗细
                        color: 'black' // 标题文本颜色
                    }
                },
                tooltip: {
                    trigger: 'item' // 提示框触发类型
                },
                legend: {
                    orient: 'vertical', // 图例方向
                    left: 'left', // 图例位置
                    data: ['Project Count', 'Total Award Amount'] // 图例数据
                },
                xAxis: {
                    type: 'category', // x 轴类型
                    data: data.map(item => item.region), // x 轴标签
                    axisLabel: {
                        rotate: 45 // 标签旋转角度
                    }
                },
                yAxis: {
                    type: 'value', // y 轴类型
                    min: 0, // y 轴最小值
                    axisLabel: {
                        formatter: '{value}' // y 轴标签格式化
                    }
                },
                series: [
                    {
                        name: 'Project Count', // 系列名称
                        type: seriesType, // 系列类型
                        data: data.map(item => ({
                            name: item.region, // 数据名称
                            value: parseFloat(item.project_count) // 数据值
                        })),
                        itemStyle: {
                            color: function (params) {
                                const colors = ['rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(54, 162, 235, 0.2)'];
                                return colors[params.dataIndex % colors.length];
                            },
                            borderColor: function (params) {
                                const borderColors = ['rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 99, 132, 1)', 'rgba(255, 205, 86, 1)', 'rgba(54, 162, 235, 1)'];
                                return borderColors[params.dataIndex % borderColors.length];
                            },
                            borderWidth: 1
                        }
                    },
                    {
                        name: 'Total Award Amount', // 系列名称
                        type: seriesType, // 系列类型
                        data: data.map(item => ({
                            name: item.region, // 数据名称
                            value: parseFloat(item.total_award_amount) // 数据值
                        })),
                        itemStyle: {
                            color: function (params) {
                                const colors = ['rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(54, 162, 235, 0.2)'];
                                return colors[params.dataIndex % colors.length];
                            },
                            borderColor: function (params) {
                                const borderColors = ['rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 99, 132, 1)', 'rgba(255, 205, 86, 1)', 'rgba(54, 162, 235, 1)'];
                                return borderColors[params.dataIndex % borderColors.length];
                            },
                            borderWidth: 1
                        }
                    }
                ]
            };

            // 如果是饼图，修改配置项
            if (type === 'pie') {
                options.series = options.series.map(series => {
                    series.radius = '50%'; // 饼图半径
                    series.center = ['50%', '50%']; // 饼图中心位置
                    return series;
                });
            }

            // 使用配置项生成图表
            chart.setOption(options);
        }
        const region1_amount_data = {{ region1_amount_data|safe }};
        const region2_amount_data = {{ region2_amount_data|safe }};
        const region3_amount_data = {{ region3_amount_data|safe }};
        const region_monthly_amount_data = {{ region_monthly_amount_data|safe }};
        const region1_count_data = {{ region1_count_data|safe }};
        const region2_count_data = {{ region2_count_data|safe }};
        const region3_count_data = {{ region3_count_data|safe }};
        const region_monthly_count_data = {{ region_monthly_count_data|safe }};
        const regionproject_count_data = {{regionproject_count_data|safe }};
        const regionawardamount_data = {{regionawardamount_data|safe }};




        createRegionalChart1('region1_amount_chart', region1_amount_data, 'bar');
        createRegionalChart2('region2_amount_chart', region2_amount_data, 'bar');
        createRegionalChart3('region3_amount_chart', region3_amount_data, 'bar');
        createRegionalMonthlyChart('region_monthly_amount_chart', region_monthly_amount_data, 'bar');
        createRegionalChart4('region1_count_chart', region1_count_data, 'bar');
        createRegionalChart5('region2_count_chart', region2_count_data, 'bar');
        createRegionalChart6('region3_count_chart', region3_count_data, 'bar');
        createRegionalMonthlyChart('region_monthly_count_chart', region_monthly_count_data, 'bar');
        createChart1('regionproject_count_data', regionproject_count_data, 'pie');
        createChart2('regionawardamount_data', regionawardamount_data, 'pie');
    </script>
</body>
</html>